<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>nCov-全国分布图</title>
    <script th:src="@{/echarts/echarts.js}"></script>
    <script th:src="@{/jquery/jquery-3.5.1.js}"></script>
</head>
<body>
<div id="container" style="width: 800px;height: 600px"></div>
<script th:inline="javascript">
    $(function () {
        // 将图表实例化和容器关联
        var myChart = echarts.init(document.querySelector('#container'));
        var base = +new Date(2019, 12, 10);
            var oneDay = 24 * 3600 * 1000;
            var nowDay = new Date().getTime();
            var size = Math.ceil((nowDay-base)/86400000);
            var data = [[base, Math.random()*300]];
            for (var i = 1; i < size; i++) {
                var now = new Date(base += oneDay);
                data.push([
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])
                ]);
            }
        // 配置图表数据信息
        var option={
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '大数据量面积图',
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'time',
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 20
            }, {
                start: 0,
                end: 20
            }],
            series: [
                {
                    name: '模拟数据',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    areaStyle: {},
                    data: data
                }
            ]
        };
        myChart.setOption(option);
    });

</script>
</body>
</html>